<template>
  <div id="app">
    <div v-if="this.$route.meta.keepAlive" style="height: 100%">
      <keep-alive>
        <router-view></router-view>
        <!-- <router-view v-if="isRouterAlive"></router-view> -->
      </keep-alive>
    </div>

    <!-- 这一行证明前面用错策略的经验 -->
    <router-view v-if="!this.$route.meta.keepAlive"></router-view>
    <!--   this.active=this.$route.query.index -->
  </div>
</template>



<script>
import API from "../src/http/API";
import { Toast } from "vant";
import taban from "./components/Tabbar.vue";
export default {
  name: "app",
  components: {
    taban,
    [Toast.name]: Toast,
  },
  provide() {
    return {
      reload: this.reload,
    };
  },
  data() {
    return {
      isRouterAlive: true,
      updata: true,
    };
  },
  watch: {
    $route(to, from) {
      //如果 要 to(进入) 的页面是需要 keepAlive 缓存的，把 name push 进 include数组
      // console.log(to);

      if (
        to.fullPath == "/home/recommend" ||
        to.fullPath == "/home/attentions" ||
        to.fullPath == "/home/hot" ||
        to.fullPath == "/details" ||
        to.fullPath == "/shopping"
      ) {
        this.guanb();
      } else {
        window.removeEventListener("scroll", this.handleScroll);
      }
    },
  },
  created() {
    this.guanb();
    this.tokens();

    console.log("走了app");
  },

  // 验证token
  mounted: function () {
    // 关闭浏览器窗口的时候清空浏览器缓存在localStorage的数据
    window.onbeforeunload = function (e) {
      var storage = window.localStorage;
      storage.removeItem("ZiLuYou");
    };
  },

  methods: {
    handleScroll() {
      // console.log(this.$route.meta)
      let scrollTop = window.pageYOffset;

      this.$route.meta.Yaxis = scrollTop;

      this.$store.commit("increment", scrollTop);
    },
    guanb() {
      window.addEventListener("scroll", this.handleScroll);
    },
    // 拿到token进行更改数据
    tokens() {
      var stime = localStorage.getItem("timestamp");

      var etime = new Date().valueOf();
      var usedTime = etime - stime; //两个时间戳相差的毫秒数
      var days = Math.floor(usedTime / (24 * 3600 * 1000));
      //计算出小时数
      var leave1 = usedTime % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / (3600 * 1000));
      //计算相差分钟数
      var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / (60 * 1000));
      var time = days + "天" + hours + "时" + minutes + "分";

      if (hours >= 2) {
        localStorage.removeItem("token");
        // this.reload();
        this.$store.commit("onlogin", false);
        return;
      }
      this.$store.commit("tokens", localStorage.getItem("token"));
      this.$store.commit("onlogin", true);
    },
  },
};
</script>

<style lang="less" >
#app {
  width: 100%;
height: 100vh;
  //  background-color: @background;
  //  background-color: @background;
  // background-color: #e4e4e4;
  .CommodityList,
  .Recommend,
  .Shopping,
  .body,
  .Hot {
    background-color: @background;
  }
}


</style>
